<template>
  <div class="page">

    <!-- 搜索区域 开始 -->
    <div class="el_card_box">
      <el-form :inline="true" size="small" :model="formInline" class="search_form">
        <el-form-item label="预约时间：">
          <el-date-picker v-model="formInline.orderTime" type="daterange" range-separator="至" start-placeholder="开始日期"
            end-placeholder="结束日期" value-format="yyyy-MM-dd">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="反馈时间：">
          <el-date-picker v-model="formInline.orderTime2" type="daterange" range-separator="至" start-placeholder="开始日期"
            end-placeholder="结束日期" value-format="yyyy-MM-dd">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="创建时间：">
          <el-date-picker v-model="formInline.createTime" type="daterange" range-separator="至" start-placeholder="开始日期"
            end-placeholder="结束日期" value-format="yyyy-MM-dd">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="责任人：">
          <user-select v-model="formInline.principals"></user-select>
        </el-form-item>
        <el-form-item label="预约医院：">
          <hospital-select v-model="formInline.hospitals"></hospital-select>
        </el-form-item>
        <el-form-item label="预约城市：">
          <city-select v-model="formInline.cities" :multiple="false"></city-select>
        </el-form-item>
        <el-form-item label="结算状态：">
          <el-select v-model="formInline.settleStatus" class="a_select" placeholder="请选择" clearable>
            <el-option v-for="(item, index) in SETTLESTATUS" :key="index" :label="item.name" :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="关键词：">
          <el-input v-model="formInline.term" placeholder="请输入客户电话/姓名"></el-input>
        </el-form-item>
      </el-form>
      <div class="search_btn_box">
        <el-button type="primary" size="small" @click="getList(1)">筛选</el-button>
        <el-button type="default" size="small" @click="rest">清空筛选</el-button>
      </div>
    </div>
    <!-- 搜索区域 end -->

    <!-- 表格 开始 -->
    <div class="table_box">
      <!-- 操作区域 开始 -->
      <div class="action_box">
        <el-button type="primary" size="small"
          :disabled="!formInline.cities || (!formInline.settleStatus && formInline.settleStatus != 0) || !formInline.hospitals"
          @click="openSettleDialog()">输出结算</el-button>
        <el-button type="default" size="small" :loading="eloading" @click="downloadExcel()">批量导出</el-button>
      </div>
      <!-- 操作区域 end -->

      <el-table ref="elTable" class="el_table" size="small" show-summary :summary-method="getSummaries"
        :data="tableData">
        <el-table-column prop="departmentName" label="客户信息" width="150">
          <template slot-scope="{row}">
            <tab-user :user="userFormatter(row)" v-if="row"></tab-user>
          </template>
        </el-table-column>
        <el-table-column prop="hospitalName" label="预约医院" show-overflow-tooltip />
        <el-table-column prop="appointmentTime" label="预约时间" show-overflow-tooltip />
        <el-table-column prop="principal" label="责任人" show-overflow-tooltip />
        <el-table-column prop="dealAmount" label="成交金额" show-overflow-tooltip />
        <el-table-column prop="collectMoney" label="收款金额" show-overflow-tooltip />
        <el-table-column prop="feedbackTime" label="反馈时间" show-overflow-tooltip />
        <el-table-column prop="outpatientFeedback" label="门诊反馈" show-overflow-tooltip />
        <el-table-column prop="mainProject" label="主诉项目" show-overflow-tooltip />
        <el-table-column prop="generalProject" label="全科项目" show-overflow-tooltip />
        <el-table-column prop="settleRule" label="结算规则" show-overflow-tooltip />
        <el-table-column prop="settleAmount" label="结算总额" show-overflow-tooltip />
        <el-table-column prop="settleCurrent" label="本期结算" show-overflow-tooltip />
        <el-table-column prop="dealType" label="缴费类型" show-overflow-tooltip />
        <el-table-column prop="remark" label="备注" show-overflow-tooltip />
        <el-table-column prop="statusDesc" label="结算状态" show-overflow-tooltip />
        <el-table-column prop="address" label="操作" width="120" align="center" fixed="right">
          <template slot-scope="{row}">
            <el-link type="primary" class="el_link" @click="openDialog(row)" v-if="row.status != 1">修改</el-link>
            <el-link type="danger" class="el_link" @click="removeEvent(row)">删除</el-link>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination_list">
        <el-pagination background layout="sizes, total,prev, pager, next, jumper" :total="pageTotal"
          :page-size="pageSize" :page-sizes="pageSizes" :current-page.sync="pageNumber" @current-change="getList"
          @size-change="changePageSize" />
      </div>
    </div>
    <!-- 表格 end -->

  </div>
</template>

<script>
import {
  showModal,
  showToast,
  deepClone,
  received,
  broadcast,
} from "@/common/util";
import {
  GET_SETTLEMENTDETAILS_SEARCH,
  GET_SETTLEMENTDETAILS_EXPORT,
  DELETE_SETTLEMENT_DETAIL
} from "@/http/finance";
import { exportExcel } from "@/common/common";
import { SETTLESTATUS } from "@/common/constants";
export default {
  data() {
    return {
      formInline: {},
      tableData: [],
      pageTotal: 0,
      pageNumber: 1,
      pageSizes: [10, 20, 50, 100],
      pageSize: 20,
      loading: false,
      eloading: false,
      SETTLESTATUS,
      
      //合计
      summary:{}
    };
  },
  mounted() {
    let _this = this;
    let query = _this.$route.query;
    if (query.id) {
      _this.$set(_this.formInline, "orderId", query.id);
    }
    this.getList();
    received("customer.add.success", function () {
      _this.getList();
    });
  },
  methods: {
    // 格式化处理用户信息
    userFormatter(row) {
      let o = deepClone(row);
      o.customerName = o.name;
      o.customerPhone = o.phone;
      o.pageType = this.id;
      o.id = row.clueId
      return o;
    },

    /** 获取用户列表 */
    getList(current) {
      let _this = this;
      let oParams = _this.getParams();
      oParams.pageNumber = current || _this.pageNumber;
      console.log(oParams);
      _this.loading = true;
      GET_SETTLEMENTDETAILS_SEARCH(oParams).then((res) => {
        console.log(res);
        _this.loading = false;
        let obj = res.data || {};
        _this.tableData = obj.list || [];
        _this.pageTotal = obj.totalElements;
        _this.summary = res.summary
      });
    },
    /** 每页展示 */
    changePageSize(e) {
      this.pageSize = e;
      this.getList();
    },

    /** 获取参数 */
    getParams() {
      let o = JSON.parse(JSON.stringify(this.formInline));
      let m = o.orderTime || []
      let n = o.orderTime2 || []
      let h = o.createTime || []
      if (m && m.length > 0) {
        o.orderStartTime = m[0]
        o.orderEndTime = m[1]
      }

      if (n && n.length > 0) {
        o.feedbackStartTime = n[0]
        o.feedbackEndTime = n[1]
      }

      if (h && h.length > 0) {
        o.createdStartDate = h[0]
        o.createdEndDate = h[1]
      }

      delete o.orderTime
      delete o.orderTime2
      delete o.createTime

      o.pageSize = this.pageSize;
      return o;
    },

    /** 重置 */
    rest() {
      this.formInline = {};
      this.pageNumber = 1;
      this.getList();
    },

    // 导出excel
    downloadExcel() {
      let _this = this;
      let o = deepClone(_this.formInline);
      let m = Object.keys(o);
      if (m.length > 0) {
        showModal({
          message: "确定是否导出筛选条件下面所有结算明细列表?",
          showCancelButton: true,
          type: "warning",
          success: function () {
            _this.dowloadExcelFile();
          },
        });
        return false;
      }

      _this.dowloadExcelFile();
    },

    // 下载excel
    dowloadExcelFile() {
      let _this = this;
      let oParams = _this.getParams();
      let options = {};
      delete oParams.pageNumber;
      delete oParams.pageSize;

      options.method = "GET";
      options.data = oParams;
      options.url = GET_SETTLEMENTDETAILS_EXPORT;
      options.fileName = "结算明细列表.xlsx";
      _this.eloading = true;
      exportExcel(options).then((res) => {
        _this.eloading = false;
      });
    },

    // 打开处理弹框
    openDialog(row) {
      let options = deepClone(row);
      options.type = 2;
      broadcast("appoint.dialog.open", options);
    },

    // 打开输出结算弹框
    openSettleDialog() {
      let o = this.getParams();
      let options = {};
      options.city = o.cities;
      options.hospital = o.hospitals;
      options.settleStatus = o.settleStatus
      options.term = o.term
      options.principals = o.principals
      if (o.orderStartTime) {
        options.orderStartTime = o.orderStartTime
        options.orderEndTime = o.orderEndTime
      }
      if (o.feedbackStartTime) {
        options.feedbackStartTime = o.feedbackStartTime
        options.feedbackEndTime = o.feedbackEndTime
      }
      options.type = 'details'
      broadcast("settle.dialog.open", options);
    },

    // 删除
    removeEvent(row) {
      let _this = this;
      showModal({
        message: "确认删除该条数据吗？",
        showCancelButton: true,
        success: () => {
          let oParams = {};
          oParams.id = row.id;
          DELETE_SETTLEMENT_DETAIL(oParams).then((res) => {
            if (res.code == 200) {
              showToast({
                message: "删除成功",
                type: "success",
              });
              _this.getList();
            }
          });
        },
      });
    },

    // 获取统计数据
    getSummaries(param) {
      const { columns, data } = param;
      const sums = [];
      let list = ['dealAmount', 'collectMoney', 'settleAmount', 'settleCurrent'];
      let o = this.summary
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = '合计';
          return;
        }
        const values = data.map(item => Number(item[column.property]));
        let idx = list.indexOf(column.property)
        if (idx >= 0) {
          sums[index] = o[column.property];
        } else {
          sums[index] = '';
        }
      });
      return sums;
    }

  },
};
</script>

<style lang="scss" scoped>

</style>
